<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="bean.*,java.util.LinkedList" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
	<meta charset="UTF-8">
	<title></title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link rel="stylesheet" href="css/mui.min.css">
	<script src="js/mui.min.js"></script>
	<script type="text/javascript">
	mui.init()
	</script>
	<style type="text/css">
	body{font-family: "Microsoft YaHei",sans-serif;color:#333;background-color: #F1E9DC;}
	div.mui-content{background-color: #F1E9DC;}
	p{margin-bottom: 0px;}
	.mui-slider-indicator.mui-segmented-control{
		padding: 5px 10px;
		background: #FFF;
	}
	.mui-segmented-control.mui-scroll-wrapper{
		height: 45px;
	}
	.mui-segmented-control.mui-scroll-wrapper .mui-control-item{
		width: 100px;
		border: 1px solid #ccc;
		box-shadow:0 0 5px #aaa;
		line-height: 30px;
	}
	.mui-segmented-control.mui-scroll-wrapper .mui-control-item.mui-active{
		color: #fff;
		background-color: #78909C;
	}
	.mui-fullscreen .mui-segmented-control~.mui-slider-group{
		top: 45px;
	}
	.mui-slider-group .mui-scroll-wrapper{
		padding-top: 5px;
	}
	</style>
</head>

<body>
	
	<header class="mui-bar mui-bar-nav">
			<h1 class="mui-title">简报网</h1>
	</header>
	
	<nav class="mui-bar mui-bar-tab">
		<div class="mui-scroll">
			<a class="mui-tab-item " data-index="0">
				<span class="mui-icon mui-icon-spinner-cycle mui-spin"></span>
				<span class="mui-tab-label">思想学习</span>
			</a>
			<a class="mui-tab-item" data-index="1">
				<span class="mui-icon mui-icon-upload"></span>
				<span class="mui-tab-label">班级活动</span>
			</a>
			<a class="mui-tab-item mui-active" data-index="2">
				<span class="mui-icon mui-icon-home"></span>
				<span class="mui-tab-label">最新动态</span>
			</a>
			<a class="mui-tab-item" data-index="3">
				<span class="mui-icon mui-icon-spinner mui-spin"></span>
				<span class="mui-tab-label">学院动态</span>
			</a>
			<a class="mui-tab-item" data-index="4">
				<span class="mui-icon mui-icon-compose"></span>
				<span class="mui-tab-label">电脑报修</span>
			</a>
		</div>
			
		</nav>
	
	<div class="mui-content">
		<div id="slider" class="mui-slider mui-fullscreen">
			<div class="mui-slider-group">
				
				  
				<div class="mui-slider-item mui-control-content">
					<div class="mui-scroll-wrapper">
						<div class="mui-scroll">
							<%
								LinkedList<College> college = (LinkedList<College>)request.getAttribute("college");
								for(College c:college){
							%>
							<label><%=c.getName() %></label>
							<ul class="mui-table-view mui-grid-view">
								<%
								LinkedList<bean.Class> cl = c.getClasses();
								int len = cl.size();
								while(len-->0) {
									bean.Class cc = cl.get(len);
								%>
								<li class="mui-table-view-cell mui-media mui-col-xs-6" onclick="classDetail('<%=cc.getCollege() %>','<%=cc.getName()%>')">
										<img class="mui-media-object" src="<%=cc.getImg() %>">
										<div class="mui-media-body"><%=cc.getName() %></div>
								</li>
								<%} %>
							</ul>
							<%} %>
						</div>
					</div>
				</div>
				
				<div class="mui-slider-item mui-control-content">
					<div class="mui-scroll-wrapper">
						<div class="mui-scroll">
							<%
								LinkedList<College> college2 = (LinkedList<College>)request.getAttribute("college");
								for(College c:college2){
							%>
							<label><%=c.getName() %></label>
							<ul class="mui-table-view mui-grid-view">
								<%
								LinkedList<bean.Class> cl = c.getClasses();
								while(!cl.isEmpty()) {
									bean.Class cc = cl.removeFirst();
								%>
								<li class="mui-table-view-cell mui-media mui-col-xs-6" onclick="classDetail2('<%=cc.getCollege() %>','<%=cc.getName()%>')">
										<img class="mui-media-object" src="<%=cc.getImg() %>">
										<div class="mui-media-body"><%=cc.getName() %></div>	
								</li>
								<%} %>
							</ul>
							<%} %>
						</div>
					</div>
				</div>
				
				
				<div class="mui-slider-item mui-control-content mui-active">
					<div class="mui-scroll-wrapper">
						<div class="mui-scroll">
							<%
								LinkedList<News> news = (LinkedList<News>)request.getAttribute("news");
								for(News n:news){
							%>
							<div class="mui-card" onclick="Details('<%=n.getHtml()%>')">
								<div class="mui-card-header mui-card-media">
									<img src="img/cbd.jpg" style="width:34px">
									<div class="mui-media-body">
										<%=n.getCollegeName()+" / "+n.getClassName()+":"+n.getTitle() %>
										<p>发表于:<%=n.getDate() %></p>
									</div>
								</div>
								<div class="mui-card-content" >
									<img src="<%=n.getImgPath() %>" alt="" width="100%"/>
									<div class="mui-card-content-inner">
										<p style="color: #333;"><%=n.getContent() %></p>
									</div>
								</div>
								<div class="mui-card-footer">
									<a class="mui-icon mui-icon-flag"></a>
									<a class="mui-icon mui-icon-more"></a>
								</div>
							</div>
							<%} %>
						</div>
					</div>
				</div>
				
				<div class="mui-slider-item mui-control-content">
					<div class="mui-scroll-wrapper">
						<div class="mui-scroll">
							<ul class="mui-table-view mui-grid-view">
								<%
									for(College c:college){
								%>
								<li class="mui-table-view-cell mui-media mui-col-xs-6" onclick="collegeDetail('<%=c.getName()%>')">
										<img class="mui-media-object" src="<%=c.getImgPath() %>">
										<div class="mui-media-body"><%=c.getName() %></div>
								</li>
								<%} %>
							</ul>
						</div>
					</div>
				</div>
				
				<div class="mui-slider-item mui-control-content">
					<div class="mui-scroll-wrapper">
						<div class="mui-scroll">
							<br><br><br><br>
							<center>计算机S精英协会电脑报修专用</center><br>
							<center>不过很抱歉，暂时不开放</center>
						</div>
					</div>
				</div>
				
			</div>
		</div>
	</div>
	<script type="text/javascript">
	mui.ready(function() {
		mui('.mui-scroll-wrapper').scroll({
			bounce: true,
			indicators: true,
			deceleration:mui.os.ios?0.003:0.0009
		});
		mui('.mui-scroll').on('tap','.mui-tab-item:not(.mui-active)',function(){
			mui('.mui-slider').slider().gotoItem(this.getAttribute('data-index'));
		});
	});
	function Details(url){
		mui.openWindow({
		    url: url,
		    id: url,
		});
	}
	
	function classDetail(college,className){
		mui.openWindow({
		    url: 'getClassMindList.do?page=1&college='+college+"&className="+className,
		    id: 1,
		});
	}
	function classDetail2(college,className){
		mui.openWindow({
		    url: 'getClassActivityList.do?page=1&college='+college+"&className="+className,
		    id: 1,
		});
	}
	function collegeDetail(college){
		mui.openWindow({
		    url: 'getCollegeNewsList.do?page=1&college='+college,
		    id: 1,
		});
	}
	
	</script>
</body>

</html>